CSS預處理器

是一種可以擴展 CSS 語法工具，也可以提供額外功能，例如變數、函數、混合、嵌套選擇器等等，幫助 CSS 編寫簡潔、高效和可維護

• 變數：常用的值存儲在變數中，可以在CSS使用
• 函數：重複CSS樣式封裝到函數中，提高可讀性和可維護性
• 混合：多個CSS樣式組合在一起，建新樣式
• 嵌套：CSS樣式嵌套在一起，也能提高可讀性和可維護性

常用CSS預處理器

• Sass(SCSS)：最流行CSS預處理器，擁有豐富功能和特性
• LESS：另一種流行CSS預處理器，擁有簡潔語法和良好兼容性
• Stylus：擁有靈活語法和強大功能，需要一定時間才能掌握

(圖片:Sass/SCSS 基本語法介紹，搞懂CSS 預處理器)

使用CSS預處理器

SCSS語法

// 使用變數
$color: #000;
// 使用函數
@function calc($a, $b) {
  return $a + $b;
}
// 使用混合
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}
// 使用嵌套
.container {
  width: 100%;
  height: 100px;

  .header {
    color: $color;
    font-size: 20px;
  }

  .content {
    background-color: #fff;
  }
}

編譯後的CSS：

.container {
  width: 100%;
  height: 100px;
}
.container .header {
  color: #000;
  font-size: 20px;
}
.container .content {
  background-color: #fff;
}

Sass和Scss

都是 CSS預處理器，用簡潔和結構化方式編寫CSS

優點

• 可以使用變量、函數、嵌套等等功能來簡化CSS編寫
• 把CSS分割多個文件，提高可讀性和可維護性
• 把CSS編譯成原生CSS，任何瀏覽器中使用

SASS和SCSS語法非常相似，但有一些區別

Live Sass Compiler

這擴充套件我覺得很不錯，可以把SASS或SCSS轉換CSS檔，在網頁中可以看到SASS或SCSS所套用樣式

(圖片:自己的Visual Studio Code)

SCSS語法

// 變量
$color: red;

// 函數
@function multiply($a, $b) {
  return $a * $b;
}

// 嵌套
.container {
  width: 100px;
  height: 100px;

  .item {
    width: 50px;
    height: 50px;
    color: $color;
  }
}

編譯後的CSS：

.container {
  width: 100px;
  height: 100px;
}
.container .item {
  width: 50px;
  height: 50px;
  color: red;
}

資料來源:Sass/SCSS 基本語法介紹，搞懂CSS 預處理器